<template>
	<view class="member">
		<view class="" v-for="(item,index) in list" :key="index">
			<view class="tit_1">
				{{item.name}}
			</view>
			<view class="cardBox light" :style="{backgroundImage:'url('+baseUrl+item.color+')'}">
				<view class="nameBox">
					<view class="text">
						<view class="name">
							VIP· {{item.name}}
						</view>
						<view class="discount" style="">
							会员享受{{item.discount}}折
						</view>
						<view class="disco" style="font-size: 24rpx;" v-if="index!=0">
							赠送{{index == 1?'300':"1000"}}代金券用于平台消费抵扣
						</view>
						<view class="disco" style="font-size: 24rpx;" v-if="index==0">
							领取200元现金抵扣券
						</view>
						<view class="disco" style="font-size: 22rpx;" v-if="index!=0">
							共享三位好友成为会员,即全额返回本人会员费(可提现)
						</view>
					</view>
				</view>
				<view class="have" v-if="item.light">
					<view class="btn" v-if="item.id==1">
						已领取
					</view>
					<view class="btn" v-else>
						已点亮
					</view>
				</view>
				<view class="small" v-if="!item.light && item.id!=1">
					<view class="btn" @tap.stop="purchase(item)">点击购买</view>
				</view>
				<view class="small" v-if="!item.light&&item.id==1">
					<view class="btn" @tap.stop="toFreeCard(item)">点击领取</view>
				</view>
				<view class="no" v-if="!item.light && item.id!=1">
					<image :src="baseUrl+'static/index/nobuy.png'" mode=""></image>
				</view>
				<view class="imageBox">
					<image :src="baseUrl+item.icon" mode=""></image>
				</view>
			</view>
		</view>

		<!-- 购买 -->
		<view class="purchase">
			<view class="btn" @tap.stop="toAgree">购买记录</view>
		</view>
		<view class="power">
			<image :src="baseUrl+'static/index/power.png'" mode=""></image>
		</view>
		<!--  -->
		<button class="sha" @tap.stop="shareClick" open-type="share"
			v-if="level_id&&level_id!=0||is_staff == 1 || identity == 1 || identity==2">
			<image :src="baseUrl+'static/index/share.png'" mode=""></image>
		</button>
		<!-- 简介 -->
		<view class="introduce" v-for="(item,index) in list" :key="index">
			{{item.remark||''}}
		</view>

	</view>
</template>

<script>
	import config from '@/common/config/config';
	export default {
		data() {
			return {
				baseUrl: config.baseurl,
				list: [],
				agent_id: '',
				id: '',
				level_id: '',
				isBuy: true,
				is_staff: '',
				identity: ''
			};
		},
		onLoad(e) {
			this.getList()
			if (e) {
				console.log(e, 'eeeeeeeee携带参数')
				this.id = e.agent_id ? e.agent_id : (uni.getStorageSync('id') ? uni.getStorageSync('id') : '')
				uni.setStorageSync('id', this.id)
			}
		},
		onShow() {

			this.isBuy = true
		},
		onShareAppMessage() {
			return {
				title: this.share.title,
				path: this.share.path,
				imageUrl: this.share.imageUrl,
				desc: this.share.desc,
				content: this.share.content,
				success(res) {
					this.$utils.toast('分享成功')
					this.share = {}
				},
				fail(res) {
					this.$utils.toast('分享失败')
				}
			}
		},
		methods: {
			// 点击确定，发给好友
			shareClick() {
				this.share = {
					title: '',
					path: `/pages/card?agent_id=${this.agent_id}`,
					imageUrl: '',
					desc: '',
					content: ''
				}
			},
			async loadData() {
				await uni.request({
					url: '/wanlshop/user/refresh',
					method: 'POST',
					success: res => {
						this.level_id = res.data.userinfo.level_id
						this.agent_id = res.data.userinfo.id
						this.is_staff = res.data.userinfo.is_staff
						this.identity = res.data.userinfo.identity
						console.log(this.agent_id, '自己的id')
					}
				});
			},
			// 获取会员卡等级列表
			async getList() {
				let that = this

				await uni.request({
					url: '/wanlshop/user/levelList',
					success: res => {
						let picArr = ['', 'static/index/card3.png', 'static/index/card1.png']
						that.list = res.data.map((item, index) => {
							return {
								...item,
								icon: picArr[index],
								color: item.light == true ? 'static/index/light.png' :
									'static/index/grey.png'
							}
						})
						that.loadData()
					}
				});
			},

			// 购买记录
			toAgree() {
				uni.navigateTo({
					url: '/pages/buyRecord'
				})
			},

			toFreeCard(item) {
				let that = this
				if (that.isBuy) {
					that.isBuy = false
					uni.request({
						url: '/wanlshop/user/createLevelOrder',
						data: {
							id: item.id,
						},
						success: res => {
							uni.showToast({
								title: res.msg,
								icon: 'none'
							})
							setTimeout(() => {
								that.isBuy = true;
								uni.navigateBack({
									delta: 1
								})
							}, 1000)
						},
						fail(err) {
							that.isBuy = true;
						}
					})
				}
			},
			// 点击购买生成订单
			purchase(item) {
				let that = this
				if (that.isBuy) {
					that.isBuy = false
					console.log(uni.getStorageSync('id'), '接口参数agent_id')
					uni.request({
						url: '/wanlshop/user/createLevelOrder',
						data: {
							id: item.id,
							agent_id: uni.getStorageSync('id') ? uni.getStorageSync('id') : ''
						},
						success: res => {
							setTimeout(() => {
								that.isBuy = true;
							}, 1000)

							that.$wanlshop.to(
								`/pages/user/money/pay?token=${res.data.token}&data=${JSON.stringify(res.data.list)}`
							);
						},
						fail(err) {
							that.isBuy = true;
						}
					})
				}
			},
		}
	}
</script>

<style lang="less">
	.button-hover {
		background-color: transparent;
	}

	button {
		border: none;
		padding: 0;
		margin: 0;
		background-color: transparent;

		&::after {
			border: none;
			padding: 0;
			margin: 0;
		}
	}

	.member {
		width: 100vw;
		position: relative;
		background-color: #252525;
		height: 100vh;
		overflow: auto;

		.light {
			background-size: 100% 100%;
		}

		.grey {
			background-size: 100% 100%;
		}

		.tit_1 {
			height: 60rpx;
			font-size: 28rpx;
			color: #FDF5CE;
			width: 90%;
			margin: 0 auto;
		}

		.tit_2 {
			height: 60rpx;
			font-size: 28rpx;
			color: #979797;
			width: 90%;
			margin: 0 auto;
		}

		.cardBox {
			width: 93%;
			height: 254rpx;
			// background: linear-gradient(103.09deg, #222A42 2.06%, #464D63 97.75%);
			border-radius: 10rpx;
			backdrop-filter: blur(10px);
			margin: 0 auto;
			margin-bottom: 40rpx;
			position: relative;

			.nameBox {
				position: absolute;
				left: 20rpx;
				top: 26rpx;
				z-index: 1000;

				image {
					width: 96rpx;
					height: 96rpx;
					margin-right: 30rpx;
				}

				.text {
					font-size: 46rpx;
					color: #663409;

					.name {
						height: 70rpx;
						line-height: 70rpx;
						font-weight: 600;
					}

					.discount {
						font-size: 32rpx;
						height: 64rpx;
						line-height: 64rpx;
					}
					.disco{
						height: 42rpx;
						line-height: 42rpx;
					}

					.time {
						font-size: 26rpx;
						color: #979797;
						margin-top: 40rpx;
						height: 50rpx;
						line-height: 50rpx;
					}
				}
			}

			.no {
				width: 50rpx;
				height: 50rpx;
				position: absolute;
				top: 16rpx;
				right: 20rpx;
				z-index: 2000;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.imageBox {
				width: 200rpx;
				height: 196rpx;
				position: absolute;
				top: 26rpx;
				right: 20rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

		}

		.introduce {
			width: 90%;
			margin: 26rpx 28rpx 16rpx 28rpx;
			font-size: 28rpx;
			color: #979797;
			white-space: pre-line;
			line-height: 60rpx;
			padding-bottom: 20rpx;
			overflow-x: hidden;
		}

		.small {
			width: 19.4%;
			position: absolute;
			bottom: 6%;
			right: -8%;
			transform: translateX(-50%);
			margin: 0 auto;
			margin-top: 100rpx;
			z-index: 2000;

			.btn {
				width: 100%;
				height: 48rpx;
				text-align: center;
				line-height: 48rpx;
				background-color: #414141;
				color: #fff;
				border-radius: 5px;
				padding: 0rpx 12rpx;
				font-size: 24rpx;
				font-weight: 500;
				margin-top: 20rpx;
			}
		}

		.have {
			width: 17%;
			position: absolute;
			bottom: -1%;
			right: -9%;
			-webkit-transform: translateX(-50%);
			transform: translateX(-50%);
			margin: 0 auto;
			margin-top: 100rpx;
			z-index: 2000;

			.btn {
				width: 100%;
				height: 44rpx;
				text-align: center;
				line-height: 44rpx;
				background-color: #252525;
				color: #fff;
				/* border-radius: 5px; */
				padding: 0rpx 16rpx;
				font-size: 24rpx;
				font-weight: 500;
				margin-top: 20rpx;
				border-top-left-radius: 30rpx;
			}
		}

		.power {
			width: 90%;
			margin: 30rpx auto;
			margin-top: 60rpx;

			image {
				width: 100%;
				height: 44rpx;
			}

		}

		.sha {
			position: fixed;
			right: -1%;
			bottom: 14%;
			z-index: 500;

			image {
				width: 120rpx;
				height: 236rpx;
			}
		}

		.purchase {
			width: 93%;
			margin: 0 auto;
			margin-top: 40rpx;

			.btn {
				width: 100%;
				height: 88rpx;
				text-align: center;
				line-height: 96rpx;
				background-color: #FEFEFE;
				color: #000;
				border-radius: 5px;
				font-size: 28rpx;
				font-weight: 500;
				margin-top: 20rpx;
			}
		}

	}
</style>